<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农户管理 - 新疆奎木星测控技术有限公司</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .toolbar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        .statistics-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.8;
        }
        .farmer-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>农户管理</h1>
            <p>农户信息管理与粮食收购数据统计平台</p>
        </div>
        
        <div class="container">
            <!-- 统计卡片 -->
            <div class="statistics-cards">
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalFarmers }}</div>
                    <div class="stat-label">注册农户总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.activeFarmers }}</div>
                    <div class="stat-label">活跃农户数量</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalFields }}</div>
                    <div class="stat-label">管理地块总数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalArea.toFixed(2) }}</div>
                    <div class="stat-label">总种植面积(亩)</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalPurchases }}</div>
                    <div class="stat-label">收购记录数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ statistics.totalIncome.toFixed(2) }}</div>
                    <div class="stat-label">总收入(万元)</div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="search-form">
                    <el-input
                        v-model="searchForm.keyword"
                        placeholder="搜索农户姓名、身份证号或手机号"
                        style="width: 300px;"
                        clearable
                        @input="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                    <el-select v-model="searchForm.village" placeholder="选择村/连" style="width: 150px;" clearable @change="handleSearch">
                        <el-option v-for="village in villageOptions" :key="village.id" :label="village.name" :value="village.id"></el-option>
                    </el-select>
                    <el-select v-model="searchForm.status" placeholder="选择状态" style="width: 120px;" clearable @change="handleSearch">
                        <el-option label="启用" value="active"></el-option>
                        <el-option label="禁用" value="inactive"></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
                <div>
                    <el-button type="primary" @click="showAddDialog">新增农户</el-button>
                    <el-button type="success" @click="exportData">导出数据</el-button>
                    <el-button type="warning" @click="importData">批量导入</el-button>
                </div>
            </div>
            
            <!-- 数据表格 -->
            <div class="data-card">
                <el-table :data="filteredFarmers" style="width: 100%" v-loading="loading">
                    <el-table-column label="头像" width="80">
                        <template #default="scope">
                            <div class="farmer-avatar">
                                {{ scope.row.name.charAt(0) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="id_card" label="身份证号" width="180"></el-table-column>
                    <el-table-column prop="phone" label="手机号" width="130"></el-table-column>
                    <el-table-column prop="village_name" label="所属村/连" width="120"></el-table-column>
                    <el-table-column prop="address" label="详细地址" width="200"></el-table-column>
                    <el-table-column prop="field_count" label="地块数量" width="100">
                        <template #default="scope">
                            <el-tag type="info">{{ scope.row.field_count }}块</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_area" label="种植面积(亩)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.total_area.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="purchase_count" label="收购次数" width="100">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row.purchase_count }}次</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_income" label="总收入(元)" width="120">
                        <template #default="scope">
                            <span style="color: #67C23A; font-weight: bold;">{{ scope.row.total_income.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                                {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="注册时间" width="150"></el-table-column>
                    <el-table-column label="操作" width="250" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewDetails(scope.row)">详情</el-button>
                            <el-button size="small" type="primary" @click="editFarmer(scope.row)">编辑</el-button>
                            <el-button size="small" type="warning" @click="viewFields(scope.row)">地块</el-button>
                            <el-button size="small" type="success" @click="viewPurchases(scope.row)">收购</el-button>
                            <el-button size="small" type="danger" @click="deleteFarmer(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px; text-align: right;"
                >
                </el-pagination>
            </div>
        </div>
        
        <!-- 新增/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="700px"
            @close="resetForm"
        >
            <el-form :model="farmerForm" :rules="formRules" ref="farmerFormRef" label-width="120px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="farmerForm.name" placeholder="请输入农户姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="id_card">
                            <el-input v-model="farmerForm.id_card" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="farmerForm.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属村/连" prop="village_id">
                            <el-select v-model="farmerForm.village_id" placeholder="选择村/连">
                                <el-option v-for="village in villageOptions" :key="village.id" :label="village.name" :value="village.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="farmerForm.address" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="银行卡号" prop="bank_card">
                            <el-input v-model="farmerForm.bank_card" placeholder="请输入银行卡号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开户银行" prop="bank_name">
                            <el-input v-model="farmerForm.bank_name" placeholder="请输入开户银行"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="farmerForm.status" placeholder="选择状态">
                                <el-option label="启用" value="active"></el-option>
                                <el-option label="禁用" value="inactive"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否有效" prop="is_valid">
                            <el-select v-model="farmerForm.is_valid" placeholder="选择是否有效">
                                <el-option label="有效" :value="1"></el-option>
                                <el-option label="无效" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="farmerForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-form>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveFarmer">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            data() {
                return {
                    loading: false,
                    dialogVisible: false,
                    isEdit: false,
                    // 搜索表单
                    searchForm: {
                        keyword: '',
                        village: '',
                        status: ''
                    },
                    // 统计数据
                    statistics: {
                        totalFarmers: 1256,
                        activeFarmers: 1189,
                        totalFields: 3456,
                        totalArea: 125678.90,
                        totalPurchases: 8956,
                        totalIncome: 2856.78
                    },
                    // 村/连选项
                    villageOptions: [
                        { id: 1, name: '第一村' },
                        { id: 2, name: '第二村' },
                        { id: 3, name: '第三村' },
                        { id: 4, name: '第一连' },
                        { id: 5, name: '第二连' },
                        { id: 6, name: '第三连' }
                    ],
                    // 农户数据
                    farmers: [
                        {
                            id: 1,
                            name: '张三',
                            id_card: '650101199001011234',
                            phone: '13899001234',
                            village_id: 1,
                            village_name: '第一村',
                            address: '新疆乌鲁木齐市天山区第一村123号',
                            bank_card: '6228480012345678901',
                            bank_name: '中国农业银行',
                            field_count: 3,
                            total_area: 156.78,
                            purchase_count: 12,
                            total_income: 45678.90,
                            status: 'active',
                            is_valid: 1,
                            created_at: '2024-01-15 09:30:00',
                            remarks: '种植经验丰富的老农户'
                        },
                        {
                            id: 2,
                            name: '李四',
                            id_card: '650102199002021234',
                            phone: '13899002345',
                            village_id: 2,
                            village_name: '第二村',
                            address: '新疆乌鲁木齐市天山区第二村456号',
                            bank_card: '6228480012345678902',
                            bank_name: '中国建设银行',
                            field_count: 2,
                            total_area: 89.45,
                            purchase_count: 8,
                            total_income: 23456.78,
                            status: 'active',
                            is_valid: 1,
                            created_at: '2024-01-16 10:15:00',
                            remarks: '新注册农户，积极性很高'
                        },
                        {
                            id: 3,
                            name: '王五',
                            id_card: '650103199003031234',
                            phone: '13899003456',
                            village_id: 4,
                            village_name: '第一连',
                            address: '新疆乌鲁木齐市天山区第一连789号',
                            bank_card: '6228480012345678903',
                            bank_name: '中国工商银行',
                            field_count: 5,
                            total_area: 234.56,
                            purchase_count: 15,
                            total_income: 67890.12,
                            status: 'active',
                            is_valid: 1,
                            created_at: '2024-01-17 08:45:00',
                            remarks: '大户农民，种植规模较大'
                        }
                    ],
                    // 表单数据
                    farmerForm: {
                        id: null,
                        name: '',
                        id_card: '',
                        phone: '',
                        village_id: '',
                        address: '',
                        bank_card: '',
                        bank_name: '',
                        status: 'active',
                        is_valid: 1,
                        remarks: ''
                    },
                    // 表单验证规则
                    formRules: {
                        name: [{ required: true, message: '请输入农户姓名', trigger: 'blur' }],
                        id_card: [
                            { required: true, message: '请输入身份证号', trigger: 'blur' },
                            { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '身份证号格式不正确', trigger: 'blur' }
                        ],
                        phone: [
                            { required: true, message: '请输入手机号', trigger: 'blur' },
                            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                        ],
                        village_id: [{ required: true, message: '请选择村/连', trigger: 'change' }],
                        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
                        is_valid: [{ required: true, message: '请选择是否有效', trigger: 'change' }]
                    },
                    // 分页数据
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 3
                    }
                };
            },
            
            computed: {
                dialogTitle() {
                    return this.isEdit ? '编辑农户' : '新增农户';
                },
                
                filteredFarmers() {
                    let filtered = this.farmers;
                    
                    if (this.searchForm.keyword) {
                        filtered = filtered.filter(item => 
                            item.name.includes(this.searchForm.keyword) || 
                            item.id_card.includes(this.searchForm.keyword) ||
                            item.phone.includes(this.searchForm.keyword)
                        );
                    }
                    
                    if (this.searchForm.village) {
                        filtered = filtered.filter(item => item.village_id === this.searchForm.village);
                    }
                    
                    if (this.searchForm.status) {
                        filtered = filtered.filter(item => item.status === this.searchForm.status);
                    }
                    
                    return filtered;
                }
            },
            
            methods: {
                /**
                 * 搜索处理
                 */
                handleSearch() {
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 重置搜索
                 */
                resetSearch() {
                    this.searchForm = {
                        keyword: '',
                        village: '',
                        status: ''
                    };
                    this.handleSearch();
                },
                
                /**
                 * 显示新增对话框
                 */
                showAddDialog() {
                    this.isEdit = false;
                    this.dialogVisible = true;
                },
                
                /**
                 * 查看详情
                 */
                viewDetails(row) {
                    ElMessage.info(`查看农户 ${row.name} 的详细信息`);
                },
                
                /**
                 * 编辑农户
                 */
                editFarmer(row) {
                    this.isEdit = true;
                    this.farmerForm = { ...row };
                    this.dialogVisible = true;
                },
                
                /**
                 * 查看地块
                 */
                viewFields(row) {
                    ElMessage.info(`查看农户 ${row.name} 的地块信息`);
                },
                
                /**
                 * 查看收购记录
                 */
                viewPurchases(row) {
                    ElMessage.info(`查看农户 ${row.name} 的收购记录`);
                },
                
                /**
                 * 删除农户
                 */
                deleteFarmer(row) {
                    ElMessageBox.confirm(
                        `确定要删除农户 ${row.name} 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        const index = this.farmers.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.farmers.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                },
                
                /**
                 * 保存农户
                 */
                saveFarmer() {
                    this.$refs.farmerFormRef.validate((valid) => {
                        if (valid) {
                            if (this.isEdit) {
                                // 编辑模式
                                const index = this.farmers.findIndex(item => item.id === this.farmerForm.id);
                                if (index > -1) {
                                    const village = this.villageOptions.find(v => v.id === this.farmerForm.village_id);
                                    this.farmers[index] = { 
                                        ...this.farmerForm,
                                        village_name: village ? village.name : ''
                                    };
                                    ElMessage.success('更新成功');
                                }
                            } else {
                                // 新增模式
                                const village = this.villageOptions.find(v => v.id === this.farmerForm.village_id);
                                const newFarmer = {
                                    ...this.farmerForm,
                                    id: Date.now(),
                                    village_name: village ? village.name : '',
                                    field_count: 0,
                                    total_area: 0,
                                    purchase_count: 0,
                                    total_income: 0,
                                    created_at: new Date().toLocaleString()
                                };
                                this.farmers.push(newFarmer);
                                ElMessage.success('新增成功');
                            }
                            this.dialogVisible = false;
                            this.resetForm();
                        }
                    });
                },
                
                /**
                 * 重置表单
                 */
                resetForm() {
                    this.farmerForm = {
                        id: null,
                        name: '',
                        id_card: '',
                        phone: '',
                        village_id: '',
                        address: '',
                        bank_card: '',
                        bank_name: '',
                        status: 'active',
                        is_valid: 1,
                        remarks: ''
                    };
                    if (this.$refs.farmerFormRef) {
                        this.$refs.farmerFormRef.resetFields();
                    }
                },
                
                /**
                 * 导出数据
                 */
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                /**
                 * 批量导入
                 */
                importData() {
                    ElMessage.success('批量导入功能开发中...');
                },
                
                /**
                 * 处理每页显示数量变化
                 */
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                },
                
                /**
                 * 处理当前页码变化
                 */
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                }
            },
            
            mounted() {
                // 页面加载完成后的初始化操作
                this.pagination.total = this.farmers.length;
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>